<template>
  <div>
    <el-row>
      <el-col :span="4" class="index_hz1">
        <div class="index_hz1_1">
          <img src="../assets/index_1.png" width="35" />
          <span>&nbsp;&nbsp;智慧宿管云平台</span>
        </div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#304156"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <router-link to="/index">
                <el-menu-item index="index+'">
                  <i class="el-icon-setting"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
              </router-link>
              <el-submenu :index="String(index)" v-for="(item,index) in list" :key="index">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>{{item.meta.title}}</span>
                </template>

                <el-menu-item-group
                  :index="String(index2)"
                  v-for="(item,index2) in item.children"
                  :key="index2"
                >
                  <router-link :to="item.path">
                    <el-menu-item>{{item.meta.title}}</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" class="index_hz2">
        <el-row>
          <el-col :span="24" class="index_hz2_1">
            <span style=" float: left;">
              <i class="el-icon-s-fold" />
              <span style="color: #8d8d8d;">
                &nbsp;&nbsp;&nbsp;首页
                <span style="color:#c1c1c1">/基础数据/学员管理</span>
              </span>
            </span>
            <div class="index_hz2_2">
              <i class="el-icon-zoom-in" />
              <i class="el-icon-s-operation" />
              <i class="el-icon-edit" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-dropdown id="lalala">
                <span class="el-dropdown-link">
                  <img src="../assets/tou.png" style="position: relative;top:10px;" />&nbsp;&nbsp;
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="z-index=9">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>布局设置</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            style="margin-left:10px;"
          >
            <el-form-item label="学员名称">
              <el-input v-model="formInline.name" placeholder="请输入学员名称"></el-input>
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="formInline.id" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="formInline.class" placeholder="请输入班级"></el-input>
            </el-form-item>
            <el-form-item label="宿舍栋号">
              <el-select v-model="formInline.dong" placeholder="宿舍栋号">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层">
              <el-select v-model="formInline.lou" placeholder="宿舍楼层" style="margin-left:27px;">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="宿舍号">
              <el-input v-model="formInline.shao" placeholder="请输入宿舍号"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.look" placeholder="学员状态">
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="margin-left:25px;">查询</el-button>
              <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left:20px;" @click="dialogVisible = true">+新增</el-button>
          <el-button type="success" disabled>修改</el-button>
          <el-button type="danger" disabled>删除</el-button>
          <el-table :data="tableData" style="width: 100%;font-size:10px;">
            <el-table-column align="center" prop="id" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="studentName" label="学员姓名"></el-table-column>
            <el-table-column align="center" prop="studentNo" label="学号"></el-table-column>
            <el-table-column align="center" prop="className" label="班级"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号" width="100"></el-table-column>
            <el-table-column align="center" prop="sex" label="性别"></el-table-column>
            <el-table-column align="center" prop="parentName" label="家长姓名"></el-table-column>
            <el-table-column align="center" prop="parentPhone" label="家长电话" width="100"></el-table-column>
            <el-table-column align="center" prop="buildingNo" label="宿舍栋号"></el-table-column>
            <el-table-column align="center" prop="storey" label="楼层"></el-table-column>
            <el-table-column align="center" prop="dormitoryNo" label="宿舍号"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="tableData[scope.$index].status"
                  :inactive-value='"0"'
                  :active-value='"1"'
                  active-color="#b90c0c"
                  inactive-color="#0269ad"
                  @change="changSwitch(scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="cao" label="操作">
              <template>
                <el-button type="primary" icon="el-icon-edit" circle @click="dialogVisible2=true"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del()"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
      <!-- 添加 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>无法添加</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改 -->
        <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
        <span>无法修改</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
          dialogVisible: false,
          dialogVisible2:false,
      tableData: [],
      formInline: {
        name: "",
        id: "",
        class: "",
        dong: [],
        lou: [],
        shao: "",
        look: []
      },
      list: [],
      value: "",
      index: ""
    };
  },
  methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    reset() {
      (this.formInline.name = ""),
        (this.formInline.id = ""),
        (this.formInline.class = ""),
        (this.formInline.dong = ""),
        (this.formInline.lou = ""),
        (this.formInline.shao = ""),
        (this.formInline.look = "");
    },
    handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //   console.log(key, keyPath);
    },
    left() {
      let that = this;
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/sys/menu/getRouters",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(op => {
        // console.log(op);
        this.list = op.data.data;
      });
    },
    tab() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bstudent/list?pageNum=1&pageSize=10",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(t => {
        console.log(t);
        this.tableData = t.data.data.list;
      });
    },del(){
        alert('无法删除')
    }
  },
  mounted() {
    this.left();
    this.tab();
  }
};
</script>
<style>
body {
  margin: 0;
}
.index_hz1 {
  overflow-x: hidden;
  overflow-y: auto;
  height: 720px;
  background: #304156;
}
.el-tree {
  position: relative;
  cursor: default;
  color: #bfcbd9;
  background: rgba(255, 255, 255, 0);
}
.index_hz1_1 {
  width: 100%;
  height: 65px;
  line-height: 65px;
  background: #2b2f3a;
}
.index_hz1_1 span {
  color: white;
  font-size: 17px;
  font-weight: bold;
}
.index_hz1_1 img {
  vertical-align: middle;
  margin-left: 10px;
}

.index_hz2 {
  height: 720px;
  overflow: auto;
}
.index_hz2_1 {
  height: 75px;
  line-height: 60px;
  border: 1px rgb(236, 236, 236) solid;
}
.el-icon-s-fold:before {
  position: relative;
  top: 2px;
  left: 5px;
  content: "\E7A9";
  font-size: 19px;
}
.index_hz2_2 {
  float: right;
  margin-left: 400px;
  height: 60px;
  width: 210px;
}
#lalala {
  z-index: 999;
}
.el-icon-zoom-in:before {
  content: "\E777";
  font-size: 22px;
}
.el-icon-s-operation:before {
  margin-left: 10px;
  content: "\E7BB";
  font-size: 22px;
}
.el-icon-edit:before {
  margin-left: 10px;
  content: "\E78C";
  font-size: 22px;
}
.el-menu {
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  width: 240px;
  padding-left: 0;
  background-color: #304156;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(105, 105, 105);
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-submenu__title {
  width: 240px;
  color: white;
}
form {
  clear: both;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 2px;
}
</style>